
<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>课程负责人</el-breadcrumb-item>
        <el-breadcrumb-item>课程信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程基本信息</el-breadcrumb-item>
      </el-breadcrumb>


      <div class="searchForm">

        <el-form :inline="true" class="demo-form-inline">
          <el-button style="position: absolute; right: 100px; top:187px" @click="exports">导出PDF</el-button>
        </el-form>


        <div id = "pdfDom">

          <center>
            <table class="tableInfo" :model="editForm" id="printTest">
              <thead></thead>
              <tbody>
              <tr>
                <th>课程学分</th>
                <td>{{editForm.points}}</td>
              </tr>
              <tr>
                <th>课程学时</th>
                <td>{{editForm.period}}</td>
              </tr>
              <tr>
                <th>理论学时</th>
                <td>{{editForm.theory}}</td>
              </tr>
              <tr>
                <th>实验学时</th>
                <td>{{editForm.practice}}</td>
              </tr>
              <tr>
                <th>周课时</th>
                <td>{{editForm.weeklytime}}</td>
             </tr>
              <tr>
               <th>总目标</th>
                <td>{{editForm.totalgoal}}</td>
              </tr>
              <tr>
                <th>课程描述</th>
                <td>{{editForm.coursedes}}</td>
              </tr>
              <tr>
                <th>教学方式</th>
                <td>{{editForm.ways}}</td>
             </tr>
              <tr>
                <th>考核方式</th>
                <td>{{editForm.tests}}</td>
              </tr>
              <tr>
                <th>修改</th>
                <td>
                  <el-tooltip class="item" effect="dark" content="编辑信息" placement="top-start">
                    <el-button type="primary" icon="el-icon-edit" circle @click="editParagraphs()"></el-button>
                  </el-tooltip>
                </td>
              </tr>
            </tbody>
          </table>
          </center>
        </div>

        <el-dialog title="修改基础信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose" append-to-body = "true">
          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="160px">


            <el-form-item label="课程学分" prop="points" >
              <el-select v-model="editForm.points" >
                <el-option label="0.5" value="0.5"></el-option>
                <el-option label="1.0" value="1.0"></el-option>
                <el-option label="2.0" value="2.0"></el-option>
                <el-option label="3.0" value="3.0"></el-option>
                <el-option label="4.0" value="4.0"></el-option>
                <el-option label="6.0" value="6.0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="课程学时" prop="period" >
              <el-input-number v-model="editForm.period" @change="handleChange" :min="1" :max="100" label="设置课程学时"></el-input-number>
            </el-form-item>

            <el-form-item label="理论学时" prop="theory" >
              <el-input-number v-model="editForm.theory" @change="handleChange" :min="0" :max="100" label="设置理论学时"></el-input-number>
            </el-form-item>

            <el-form-item label="实验学时" prop="practice" >
              <el-input-number v-model="editForm.practice" @change="handleChange" :min="0" :max="100" label="设置实验学时"></el-input-number>
            </el-form-item>

            <el-form-item label="周课时" prop="weeklytime" >
              <el-select v-model="editForm.weeklytime" >
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="总目标" prop="totalgoal" >
              <el-input type="textarea" v-model="editForm.totalgoal" ></el-input>
            </el-form-item>

            <el-form-item label="课程描述" prop="coursedes">
              <el-input type="textarea" v-model="editForm.coursedes"></el-input>
            </el-form-item>
            <el-form-item label="教学方法" prop="ways">
              <el-input type="textarea" v-model="editForm.ways"></el-input>
            </el-form-item>
            <el-form-item label="考核方式" prop="tests">
              <el-input type="textarea" v-model="editForm.tests"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editParagraphInfo">修 改</el-button>
          </div>
        </el-dialog>

      </div>


    </el-card>
  </div>
</template>


<script>
  export default {

    created(){
      this.getall();
    },
    data() {
      return {
        fileName: this.$session.get('coursename') + '课程基础内容信息',
        List:[],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,

        editForm:{
          courseid:this.$session.get('bulls'),
          points:'',
          period:'',
          theory:'',
          practice:'',
          weeklytime:'',
          totalgoal:'',
          coursedes:'',
          ways:'',
          tests:'',
        },
        editFormRules: {


        },




      }
    },


    methods: {
      exports () {
			    this.getPdf('pdfDom', this.fileName)
		  },
      editParagraphInfo () {
        this.$refs.editFormRef.validate(async valid => {
          console.log(valid);
          if (!valid) return;

          const { data: res } = await this.$http.put("Courses/CourseDetail", this.editForm);
          console.log(res);
          if (res !== "success") return this.$message.error("修改失败");
          this.$message.success("修改成功");

          this.editDialogVisible = false;
          this.getall();
        });
      },

      async getall(){
        const {data:res} = await this.$http.get("Courses/CourseDetail?courseid="+this.$session.get("bulls"));
        this.editForm = res;
      },

      async editParagraphs(){
        const {data:res} = await this.$http.get("Courses/CourseDetail?courseid="+this.$session.get("bulls"));
        this.editForm = res;
        this.editDialogVisible = true;
      },
      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleChange(value) {
        console.log(value);
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
      ret(){
        this.$router.push({ path: "../manageCourse"});
      },

    }
  }
</script>




<style scoped>
  .el-header{
    background: lightslategray;
    color: white;
    font-size: 25px;
    align-items: center;
    justify-content: space-between;
    display: flex;
  }
  .el-main{
    background-color: whitesmoke;
  }

  table.tableInfo{
    border: 1px;
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#808080;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;

  }

  .tableInfo th{
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #EBEEF5;;
    width: 150px;
    background-color: #808080;
    color: white;
    font-size: 14px;
  }

  .tableInfo td{
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #EBEEF5;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    width: 600px;
    font-size: 14px;
  }
</style>
